import React, {
  useDeferredValue,
  useState,
  memo,
  useEffect,
  useMemo,
} from "react";
let i =0;

const List = memo(function ({ count }) {
  console.log("List被调用了",i++);
  const [data, setData] = useState([]);

  useEffect(() => {
    const arr = [];
    arr.length += 10;
    for (let i = 0; i < arr.length; i++) {
      arr.fill(i + 1, i);
    }
    setData(arr);
  }, [count]);

  return (
    <div>
      {data.map((item) => {
        return <p key={item}>{count}</p>;
      })}
    </div>
  );
});

export default function App() {
  const [count, setCount] = useState(0);

  const deferredCount = useDeferredValue(count);

  const MemoList = useMemo(() => <List count={deferredCount}></List>, [deferredCount]);

  return (
    <div>
      <h1>useDeferredValue</h1>
      <p>count:{count}</p>
      <input
        type="text"
        value={count}
        onChange={(e) => setCount(e.target.value)}
      />
      <hr></hr>
      {MemoList}
    </div>
  );
}
